<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        div{
            width: 850px;
            height: 500px;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
			border: 5px solid fuchsia;
        }
        div ul {
            position: absolute;
            left: 0;
            top: 0;
            width: 850px;
        }
        div ul li, div ul li img{
            display: block;
            width:850px;
            height: 500px;
        }
        div ul li{
            list-style: none;
            float: left;
            opacity: 1;
            animation: 1s;
        }
        div ol li{
            list-style: none;
            width: 30px;
            height: 30px;
           /* float: left; */
            margin: 10px;
            background-color: #ccc;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
            font-size: 14px;
            z-index: 99;
			cursor: pointer;
        }
        div ol{
            position: absolute;
			
            right: 5%;
            bottom: 140px;
        }
        a{  
            text-decoration: none;
            display: block;
            width: 40px;
            height: 40px;
           /* background-color: #ccc; */
		   background: url(img/top.png);
            font-size: 20px;
            text-align: center;
            color: #999;
            line-height: 40px;
            position: absolute;
            left:50%;
            opacity: 0.8;
            z-index: 99;
        }
		a img{
			width: 100%;
			height: 100%;
			
		}
        #first{
            left: 50%;
			background: url(img/top.png);
			position: absolute;
			 width: 40px;
			height: 40px;
        }
        #last{
          bottom:0;
			
			
        }
        .ac{
            opacity: 1;
            z-index: 1px;
            background-color: red;
        }
        .trans{
            transition: 1s;
        }
        
    </style>
</head>
<body>
    <div class="box">
        <ul class="trans">
            <li class="ac"><img src="img/0900ba4f655f2d4946f0243c80c2a7e5.png" alt=""></li>
            <li><img src="img/0939520ad407e136c9a583f0f8d53a10.png" alt=""></li>
            <li><img src="img/1565958311662.png" alt=""></li>
            <li><img src="img/452de634ee6e645ce58edaabeb1cf922.png" alt=""></li>
			 <li><img src="img/f16fef01a689d1d5f76b11668d4a95f1.png" alt=""></li>
        </ul>
        <ol>
            <li class="ac">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        <a href="javeScript:;" id="first"><!-- &laquo; --><img src="img/top.png" ></a>
        <a href="javeScript:;" id = "last"><!-- &raquo; --><img src="img/under.png" ></a>
    </div>
    <script>
        function  Carousel(){
            this.ul = document.querySelector("div ul"),
            this.uls = this.ul.children,
            this.ulsLen = this.uls.length
            this.ol = document.querySelector("div ol"),
            this.ols = this.ol.children,
            this.first = document.querySelector("#first"),
            this.last = document.querySelector("#last"),
            this.div = document.querySelector("div"),
            this.index = 0,
            this.nextIndex = 0;
            this.timer;
            this.ul.appendChild(this.uls[0].cloneNode(true))
            this.ul.style.height = (this.ulsLen+1)*this.uls[0].offsetHeight + "px"
            this.init()
        }


        Carousel.prototype.init = function(){
            this.olclick()
            this.lastclick()
            this.firstclick()
            this.settimer()
            this.cleartimer()
            this.outtimer()
        }

        //点击Ol下的li跳转图片
        Carousel.prototype.olclick = function(){
            Array.from(this.ols).forEach((li,i)=>{
                li.onclick = () => {
                    this.nextIndex = this.index
                    this.index = i
                    this.ols[this.nextIndex].classList.remove("ac")
                    this.ols[this.index].classList.add("ac")
                    this.ul.style.top = -this.index*this.uls[0].offsetHeight + "px"
                }
            })
        }

        

        //先封装一个函数来装在点击last按钮的时候执行的代码

        Carousel.prototype.change = function(){
            this.nextIndex = this.index
            this.index++
            if(this.index == this.ulsLen){
                this.index = 0
                this.ul.style.top = -this.ulsLen*this.uls[0].offsetHeight + "px"
                this.ols[this.nextIndex].classList.remove("ac")
                this.ols[this.index].classList.add("ac")
                setTimeout(() => {
                    this.ul.classList.remove("trans")
                    this.ul.style.top = 0

                    setTimeout(() => {
                        this.ul.classList.add("trans")
                    }, 10);

                }, 1000);
            }else{
                this.ul.style.top = -this.index*this.uls[0].offsetHeight + "px"
                this.ols[this.nextIndex].classList.remove("ac")
                this.ols[this.index].classList.add("ac")
            }
        }

        //点击last按钮切换图片
        Carousel.prototype.lastclick = function(){
            this.last.onclick = ()=>{
                this.change()
            }
        }

        //点击first按钮切换图片

        Carousel.prototype.firstclick  = function(){
            this.first.onclick = ()=>{
                this.nextIndex = this.index
                this.index--
                if(this.index<0){
                    this.index = this.ulsLen-1
                    this.ols[this.nextIndex].classList.remove("ac")
                    this.ols[this.index].classList.add("ac")
                    this.ul.classList.remove("trans")
                    this.ul.style.top = -this.ulsLen*this.uls[0].offsetHeight + "px"
                    setTimeout(() => {
                        this.ul.classList.add("trans")
                        this.ul.style.top = -this.index*this.uls[0].offsetHeight + "px"
                    }, 10);
                }else{
                    this.ul.style.top = -this.index*this.uls[0].offsetHeight + "px"
                    this.ols[this.nextIndex].classList.remove("ac")
                    this.ols[this.index].classList.add("ac")
                }
            }
        }

        //定时进行切图
        Carousel.prototype.settimer = function(){
            this.timer = setInterval(() => {
                this.change()
            }, 1500);
        }
        //鼠标移入停止

        Carousel.prototype.cleartimer = function(){
            this.div.onmouseenter = ()=>{
                clearInterval(this.timer)
            }
        }

        //鼠标移出再次定时切图
        Carousel.prototype.outtimer = function(){
            this.div.onmouseleave = () =>{
                this.timer = setInterval(() => {
                    this.change()
                }, 1500);
            }
        }
        new Carousel()
    </script>
</body>
</html>